<template>
	<view class="container">
		<view class="header" style="background-image: url(../../static/header.png);"><!-- <image src="../../static/header.png" mode=""></image> --></view>
		<view class="content">
			<view class="h-header">
				<text v-show="flag3">获取石家庄市政策隔离信息</text>
				<text v-show="flag1">获取{{ this.cnameTarget }}政策隔离信息</text>
			</view>
			<view class="footer">
				<view class="blue">
					<view class="first">
						<image class="location" src="../../static/icon1.png" mode=""></image>
						<text>出发城市：</text>
					</view>
					<navigator url="#" class="second">
						<picker mode="selector" :value="index" :range="somes" @change="bindPickerChange" range-key="name">
							<view>{{ somes[index].name}}</view>
						</picker>
						<!-- <text v-show="flag">选择省份</text> -->
						<image class="down" src="../../static/down.png" mode=""></image>
					</navigator>
					<navigator url="#" class="third">
						<!-- <view v-show="flag2">{{this.cname}}</view> -->
						<image class="down" src="../../static/down.png" mode=""></image>
						<picker mode="selector" :value="index1" :range="somes1" @change="bindPickerChange1" range-key="name">
							<view>{{ somes1[index1].name}}</view>
						</picker>
					</navigator>
				</view>
				<view class="red">
					<view class="first">
						<image class="location" src="../../static/icon2.png" mode=""></image>
						<text>目的城市：</text>
					</view>
					<navigator url="#" class="second">
						<!-- <text v-show="flag">{{somes1Target[index2].name}}</text> -->
						<picker mode="selector" :value="index2" :range="somesTarget" @change="bindPickerChange2" range-key="name">
							<view>{{ somesTarget[index2].name}}</view>
						</picker>

						<image class="down" src="../../static/down.png" mode=""></image>
					</navigator>
					<navigator url="#" class="third">
						<!-- <text v-show="flag1">选择城市</text> -->
						<image class="down" src="../../static/down.png" mode=""></image>
						<picker mode="selector" :value="index3" :range="somes1Target" @change="bindPickerChange3" range-key="name">
							<view>{{somes1Target[index3].name }}</view>
						</picker>
					</navigator>
				</view>
				<view class="route">
					<view class="left">
						<image class="ico" src="../../static/icon3.png" mode=""></image>
						<text>出发路径:</text>
					</view>
					<view class="right" v-show="flag2">北京市-郑州市</view>
					<view class="right">
						{{ this.cname }}-{{ this.cnameTarget }}
						<!-- {{somes1[index1]["name"]}}--{{somes1Target[index3]["name"]}} -->
					</view>
				</view>
				<view class="time">
					<view class="left">
						<image class="ico" src="../../static/icon4.png" mode=""></image>
						<text>更新时间:</text>
					</view>
					<view class="right" v-show="flag2">2021-6-10:10:10:10</view>
					<view class="right" v-show="flag1">{{ policy.release_time }}</view>
				</view>
				<view class="gl">
					<view class="left">
						<image class="ico" src="../../static/icon5.png" mode=""></image>
						<text>隔离政策:</text>
					</view>
				</view>
				<view class="detail">
					<view class="neirong" v-show="flag2">该市都是低风险区,持"河南健康码"可自由有序流动.但根据往往会日哦文化和禁赛了房间在空军机计算机...</view>
					<view class="details">{{ policy.body }}</view>
					<navigator class="cha" url="#" @click="chaBtn()">查看详情>></navigator>
				</view>
				<view class="show"><text class="tuisong" url="#">订阅郑州->安阳隔离信息,信息更新第一时间推送给您</text></view>
				<view class="mianze">免责说明:本页面信息仅提供参考,数据来源于官方.如要前往某地,可咨询当地社区办事处或当地政府.</view>
			</view>

			<view class="my-footer">
				<navigator url="#" class="share" @click="shareBtn()">分享</navigator>
				<navigator url="#" class="require" @click="requireBtn()">信息反馈</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cname: '',
			cnameTarget: '',
			somes: [{ name: '' }],
			somes1: [{ name: '' }],
			somesTarget: [{ name: '' }],
			somes1Target: [{ name: '' }],
			index: 0,
			index1: 0,
			index2: 0,
			index3: 0,
			flag3: true,
			flag1: false,
			flag2: true,
			// details:{body:""},
			policy: '', //政策
			// policy_id:"",
			ccode: '',
			pcode: '',
			ccodeTarget: '',
			pcodeTarget: '',
		};
	},
	onLoad() {
		let that = this;
		that.getSomes();
		that.getSomes1();
		that.getSomesTarget();
		that.getSomes1Target();
		setTimeout(function() {
			that.getDetials();
		},500);
		// setTimeout(function() {
		// 	that.bindPickerChange(e);
		// },1000);
		// setTimeout(function() {
		// 	that.bindPickerChange2(e);
		// },1000);
	},
	methods: {
		chaBtn() {
			uni.navigateTo({
				url: 'index2'
			});
		},
		shareBtn() {
			uni.navigateTo({
				url: 'index4?policy_id=' + this.p_id
			});
			// console.log(policy_id, "wodetianlalu")
			// getCode();
		},
		requireBtn() {
			uni.navigateTo({
				url: 'index3'
			});
		},
		// getClose(){
		// 	this.flag = false;
		// },
		// getClose1(){
		// 	this.flag1 = false;
		// },
		getSomes() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces',
				method: 'GET',
				header: {
					'Contest-Type': 'application/json'
				},
				success: res => {
					this.somes = res.data.data;
					// console.log(this.somes)
				}
			});
			
		},
		getSomes1() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces/' + this.pcode,
				method: 'GET',
				header: {
					'Content-Type': 'application/json'
				},
				success: res => {
					this.somes1 = res.data.data;
					// console.log(res, 'oooooo');
					this.ccode = this.somes1[this.index1].code;
				}
			});
		},
		getSomesTarget() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces',
				method: 'GET',
				header: {
					'Contest-Type': 'application/json'
				},
				success: res => {
					this.somesTarget = res.data.data;
				}
			});
		},
		getSomes1Target() {
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/area/provinces/' + this.pcodeTarget,
				method: 'GET',
				header: {
					'Content-Type': 'application/json'
				},
				success: res => {
					this.somes1Target = res.data.data;
					this.ccodeTarget = this.somes1Target[this.index3].code;
				}
			});
		},
		getDetials() {
			console.log(this.ccode, 'ppp');
			uni.request({
				url: 'http://epidemic.site.ximengnaikang.com/api/v1/risk-assess',
				method: 'POST',
				data: {
					// from_city_code:this.ccode,
					// to_city_code:this.ccodeTarget,
					// to_city_code:this.ccode,
					// "110000"?"110000":
					from_city_code: this.ccode?this.ccode:"110000",
					// "130100"?"130100":
					to_city_code: this.ccodeTarget?this.ccodeTarget:"130000",
				},
				header: {
					'Content-Type': 'application/json'
				},
				success: res => {
					// console.log(res.data.data);
					// console.log("wodetian")
					// 获取出发地的各种信息
					this.policy = res.data.data;
					console.log(this.policy, 'jjjjfdsfas');
					// 拿不到policy_id
					this.p_id = this.policy.policy_id;
					console.log(this.p_id, 'jkdjfls;kdjg;lsdkjg;dlsjg;lsdjg;sdljg;sadjg;sdj');
				}
			});
			
			
		},
		bindPickerChange: function(e) {
			// console.log('picker发送选择改变，携带值为', e.target.value)
			this.index = e.target.value;
			this.pcode = this.somes[this.index].code;
			this.getSomes1(this.pcode);
			this.flag1 = true;
		},
		bindPickerChange1: function(e) {
			// console.log('picker发送选择改变，携带值为', e.target.value)
			this.index1 = e.target.value;
			this.flag2 = false;
			this.ccode = this.somes1[this.index1].code;
			this.cname = this.somes1[this.index1].name;
			// console.log(this.ccode,"我的天呀")
			// console.log("hahaha")
			this.getDetials(this.ccode);
		},
		bindPickerChange2: function(e) {
			// console.log('picker发送选择改变，携带值为', e.target.value)
			this.index2 = e.target.value;
			this.pcodeTarget = this.somesTarget[this.index2].code;
			this.getSomes1Target(this.pcodeTarget);
		},
		bindPickerChange3: function(e) {
			// console.log('picker发送选择改变，携带值为', e.target.value)
			this.index3 = e.target.value;
			this.flag2 = false;
			this.ccodeTarget = this.somes1Target[this.index3].code;
			this.cnameTarget = this.somes1Target[this.index3].name;
			// console.log(this.ccodeTarget)
			// console.log("hahaha")
			// this.getSomes1(this.pcode);
			this.getDetials(this.ccodeTarget);
			this.flag1 = true;
			this.flag3 = false;
		}
	}
};
</script>

<style>
.container {
	width: 375px;
	height: 100vh;
	background-color: #f9f9fb;
}
.container .header {
	width: 100%;
	height: 198px;
}
.container .header {
	width: 375px;
	height: 198px;
}
.container .content {
	margin-top: -20px;
	width: 375px;
	height: 574px;
	/* height: 700px; */
	background-color: #ffffff;
	border-radius: 12px;
}
.container .content .h-header {
	text-align: center;
	padding: 15px 0;
}
.container .content .h-header text {
	width: 176px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #23459d;
}
.container .content .footer {
	height: calc(100%-50px);
	/* display: flex; */
	/* justify-content: space-between; */
	width: 345px;
	/* border: 1px solid black; */
	margin: 0 auto;
	/* box-sizing: border-box; */
}
.container .content .footer .blue {
	height: 36px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	margin-top: 15px;
	position: relative;
}
.container .content .footer .blue .first {
	width: 90px;
	height: 14px;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;
}

.container .content .footer .blue .second {
	width: 110px;
	height: 36px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	line-height: 36px;
	position: relative;
}
.container .content .footer .blue .second text {
	width: 64px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
}
.container .content .footer .blue .third {
	width: 110px;
	height: 36px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	line-height: 36px;
	position: relative;
}
.container .content .footer .blue .third text {
	width: 64px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
}

.container .content .footer .red {
	height: 36px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	margin-top: 15px;
}
.container .content .footer .red .first {
	width: 90px;
	height: 14px;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;
}
.container .content .footer .red .second {
	width: 110px;
	height: 36px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	line-height: 36px;
	position: relative;
}
.container .content .footer .red .second text {
	width: 64px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
}

.container .content .footer .red .third {
	width: 110px;
	height: 36px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	line-height: 36px;
	position: relative;
}
.container .content .footer .red .third text {
	width: 64px;
	height: 16px;
	font-size: 16px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
}

.container .content .footer .location {
	margin: 0 3px;
	width: 12px;
	height: 13px;
	/* background-color: #444444; */
}
.container .content .footer .down {
	margin: 0 3px;
	width: 32upx;
	height: 20upx;
	position: absolute;
	right: 2px;
	top: 10px;
	/* background-color: #999999; */
}
.container .content .footer .ico {
	margin: 0 3px;
	width: 15px;
	height: 15px;
}
.container .content .footer .route {
	margin-top: 15px;
	height: 20px;
	display: flex;
	justify-content: space-between;
	/* line-height: 20px; */
	align-items: center;
	position: relative;
}
.container .content .footer .route .left {
	/* width: 100px;
		height: 14px; */
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;
}
.container .content .footer .route .right {
	/* width: 61px;
		height: 14px; */
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
	position: absolute;
	margin-top: 2px;
	right: 5px;
}
.container .content .footer .time {
	margin-top: 15px;
	/* height: 15px; */
	display: flex;
	justify-content: space-between;
	line-height: 15px;
	align-items: center;
	position: relative;
}
.container .content .footer .time .left {
	/* width: 100px;
		height: 14px; */
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;
}
.container .content .footer .time .right {
	/* width: 130px;
		height: 14px; */
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #333333;
	margin-top: 2px;
	position: absolute;
	right: 5px;
}
.container .content .footer .gl {
	margin-top: 15px;
	/* height: 15px;
		line-height: 15px; */
}
.container .content .footer .gl .left {
	/* 	width: 100px;
		height: 14px; */
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 500;
	line-height: 14px;
	color: #333333;
}
.detail {
	width: 345px;
	height: 93px;
	background: #f7f7f7;
	opacity: 1;
	border-radius: 4px;
	margin: 15px auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
}
.detail .neirong {
	width: 316px;
	height: 57px;
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 21px;
	color: #333333;
	margin-top: 10px;
}
.detail .cha {
	/* width: 72px;
		height: 14px; */
	font-size: 14px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	color: #23459d;
	position: absolute;
	text-align: end;
	margin-left: 260px;

	margin-top: 66px;
}
.show {
	margin-top: 10px;
	width: 345px;
	height: 36px;
	background: #ff6600;
	/* background-color: #007AFF; */
	opacity: 0.1;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ff6600;
	margin: 0 auto;
}
.show text.tuisong {
	/* width: 287px;
		height: 12px; */
	font-size: 12px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 14px;
	/* opacity: 1 !important; */
	/* color: #FF6600; */
}
.mianze {
	width: 345px;
	height: 30px;
	font-size: 12px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 18px;
	color: #999999;
	margin: 20px auto;
}
.my-footer {
	position: fixed;
	bottom: 0;
	width: 375px;
	height: 50px;
	background: #ffffff;
	border: 1px solid #eeeeee;
	display: flex;
	justify-content: space-around;
	text-align: center;
	align-items: center;
}
.my-footer .share {
	width: 130px;
	height: 40px;
	background: #23459d;
	opacity: 1;
	border-radius: 20px;
	line-height: 40px;
	color: #ffffff;
}
.my-footer .require {
	width: 130px;
	height: 40px;
	background: #23459d;
	opacity: 1;
	border-radius: 20px;
	line-height: 40px;
	color: #ffffff;
}
</style>
